<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=bar-simple
-->
<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style=" height: 600px; width: 800px; margin: 0">
    <div id="container" style="background: rgb(16, 12, 42); height: 100%"></div>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

    <script type="text/javascript">
        var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};

        var option;



        option = {
            title: {
                text: '世界人口总量',
                subtext: '数据来自网络'
            },
            // tooltip: {
            //     trigger: 'axis',
            //     axisPointer: {
            //         type: 'shadow'
            //     }
            // },
            legend: {
                data: [{
                    name: '条',
                    icon: 'circle',
                    // 设置文本为红色
                    textStyle: {
                        color: 'red'
                    }
                }, {
                    name: '框',
                    icon: 'circle',
                    // 设置文本为红色
                    textStyle: {
                        color: '#fff'
                    }
                }],
            },
            grid: {
                top: "10%",
                left: "22%",
                bottom: "10%",
                containLabel: true
            },
            xAxis: {
                show: false,
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: [{
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: "#fff"
                },
                type: 'category',
                data: ['巴西', '印尼', '美国', '印度', '中国', ]
            }, {
                data: [702, 350, 610, 793, 664],
                inverse: true,
                // 不显示y轴的线
                axisLine: {
                    show: false
                },
                // 不显示刻度
                axisTick: {
                    show: false
                },
                // 把刻度标签里面的文字颜色设置为白色
                axisLabel: {
                    color: "#fff"
                }
            }],

            series: [{
                name: '条',
                yAxisIndex: 0,
                barCategoryGap: 50,
                //柱子的宽度
                barWidth: 10,
                //圆角
                itemStyle: {
                    normal: {
                        barBorderRadius: 20,
                        // params 传进来的是柱子对象
                        color: function(params) {
                            // params 传进来的是柱子对象
                            // console.log(params);
                            // dataIndex 是当前柱子的索引号
                            return myColor[params.dataIndex];
                        }
                    }

                },
                label: {
                    // 主标题文字字体的风格。

                    // 可选：

                    // 'normal'
                    // 'italic'
                    // 'oblique'
                    normal: {
                        show: true,
                        // 图形内显示
                        position: "inside",
                        // 文字的显示格式
                        formatter: "{c}%"
                    }
                },
                type: 'bar',
                data: [70, 34, 60, 78, 69],
            }, {
                name: '框',
                type: 'bar',
                barCategoryGap: 50,
                barWidth: 15,
                yAxisIndex: 1,
                data: [100, 100, 100, 100, 100],
                itemStyle: {
                    color: "none",
                    borderColor: "#00c1de",
                    borderWidth: 3,
                    barBorderRadius: 15
                }
            }]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
    </script>
</body>

</html>